<template>
  <div class="son-page-container" :style="{ backgroundImage: `url(${website_bg_url})` }">
    <el-container class="main-container">
      <el-header height="10vh" class="header-container">
        <MyHeader />
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="area-container right-area">
              <div class="lab-main">
                <div class="lab-left">
                  <div class="month-row">
                    <div
                      class="month-item"
                      v-for="m in 12"
                      :key="m"
                      :class="{ active: selectedMonth === m }"
                      @click="selectedMonth = m"
                    >
                      {{ m }}月
                    </div>
                  </div>
                  <div class="left-second-row">
                    <div class="left-second-half left-second-left">
                      <div class="section-title">创作力排行榜</div>
                      <div class="rank-list">
                        <div class="rank-top1">
                          <div class="rank-top-item rank-1">
                            <div class="rank-badge">
                              <div class="crown gold"></div>
                              1
                            </div>
                            <div class="avatar-wrapper">
                              <div class="initials">测</div>
                            </div>
                            <div class="rank-top-name">测试</div>
                          </div>
                        </div>
                        <div class="rank-top23">
                          <div class="rank-top-item rank-2">
                            <div class="rank-badge">
                              <div class="crown silver"></div>
                              2
                            </div>
                            <div class="avatar-wrapper">
                              <div class="initials">测</div>
                            </div>
                            <div class="rank-top-name">测试</div>
                          </div>
                          <div class="rank-top-item rank-3">
                            <div class="rank-badge">
                              <div class="crown bronze"></div>
                              3
                            </div>
                            <div class="avatar-wrapper">
                              <div class="initials">测</div>
                            </div>
                            <div class="rank-top-name">测试</div>
                          </div>
                        </div>
                        <div class="rank-rest">
                          <div class="rank-item" v-for="i in [4,5,6]" :key="i">
                            <div class="rank-left">
                              <span class="rank-index">{{ i }}</span>
                              <img class="rank-avatar" src="/ai-icon.svg" alt="头像" />
                              <span class="rank-name">测试</span>
                            </div>
                            <div class="rank-score">—</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="divider-vertical"></div>
                    <div class="left-second-half left-second-right">
                      <div class="section-title">影响力排行榜</div>
                      <div class="rank-list">
                        <div class="rank-top1">
                          <div class="rank-top-item rank-1">
                            <div class="rank-badge">
                              <div class="crown gold"></div>
                              1
                            </div>
                            <div class="avatar-wrapper">
                              <div class="initials">测</div>
                            </div>
                            <div class="rank-top-name">测试</div>
                          </div>
                        </div>
                        <div class="rank-top23">
                          <div class="rank-top-item rank-2">
                            <div class="rank-badge">
                              <div class="crown silver"></div>
                              2
                            </div>
                            <div class="avatar-wrapper">
                              <div class="initials">测</div>
                            </div>
                            <div class="rank-top-name">测试</div>
                          </div>
                          <div class="rank-top-item rank-3">
                            <div class="rank-badge">
                              <div class="crown bronze"></div>
                              3
                            </div>
                            <div class="avatar-wrapper">
                              <div class="initials">测</div>
                            </div>
                            <div class="rank-top-name">测试</div>
                          </div>
                        </div>
                        <div class="rank-rest">
                          <div class="rank-item" v-for="i in [4,5,6]" :key="i">
                            <div class="rank-left">
                              <span class="rank-index">{{ i }}</span>
                              <img class="rank-avatar" src="/ai-icon.svg" alt="头像" />
                              <span class="rank-name">测试</span>
                            </div>
                            <div class="rank-score">—</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="lab-middle">
                  <div class="section-title">热门模版</div>
                  <div class="template-list">
                    <div class="template-item" v-for="i in 5" :key="i">
                      <img class="template-thumb" src="https://xingchen8.oss-cn-shanghai.aliyuncs.com/2025-06/ice-generated/1818c110406771f0a850e7f6d75a6302/snapshots/normal/5a41075f35104f2c950d2ca22aa27d00-00001.jpg" alt="模板预览" />
                      <div class="template-meta">
                        <div class="category-name">分类名称</div>
                        <div class="template-name">模板名称</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="lab-right">
                  <div class="section-title">快速入口</div>
                  <div class="quick-entry">
                    <div class="quick-item"><div class="quick-btn">去创作</div></div>
                    <div class="quick-item"><div class="quick-btn">去编辑</div></div>
                    <div class="quick-item"><div class="quick-btn">去写作</div></div>
                    <div class="quick-item"><div class="quick-btn">论坛</div></div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import axiosUtil from '../../axios-util/axios-util'
import { ArrowDown } from '@element-plus/icons-vue'
import FollowNote from '../laboratory/FollowNote.vue'
import LinkToMindMap from '../laboratory/LinkToMindMap.vue'
import LinkToNote from '../laboratory/LinkToNote.vue'
import PictureToNote from '../laboratory/PictureToNote.vue';
import MyHeader from '../common/MyHeader.vue';

// 网站背景图
const website_bg_url = ref('')
// 网站logo
const website_logo = ref('')
// 本页菜单
const page_menu_list = ref([])

// 左侧月份选择
const selectedMonth = ref(1)

// tab切换相关
const tabList = [
  { key: 'pictureToNote', label: '图转笔记' },
  { key: 'followNote', label: '仿写笔记' },
  { key: 'linkToNote', label: '链接转笔记' },
  { key: 'linkToMindMap', label: '链接转思维导图' }
]
const activeTab = ref('pictureToNote')
const handleTabClick = (key: string) => {
  activeTab.value = key
}

// 切换菜单展开/收起
const toggleMenu = (menu: any) => {
  menu.isExpanded = !menu.isExpanded
}

// 处理子菜单点击
const handleChildClick = (child: any) => {
  console.log('子菜单点击:', child)
  // 这里添加子菜单点击的处理逻辑
}

// 获取姓名首字母
const getInitials = (name: string) => {
  return name ? name.charAt(0).toUpperCase() : ''
}

onMounted(() => {
  initWebsiteBgUrl()
  initPageMenuList()
})

//读取配置，获取网站背景图和网站logo
const initWebsiteBgUrl = async () => {
  const response = await axiosUtil.post('api/pc/site/get_agent_config', {})
  if (response.data.code === 0 && response.data.data) {
    website_bg_url.value = import.meta.env.VITE_APP_SERVER + response.data.data.website_bg || ''
    website_logo.value = import.meta.env.VITE_APP_SERVER + response.data.data.website_logo || ''
  }
}

// 获取本页菜单
const initPageMenuList = async () => {
  const response = await axiosUtil.post('api/storeintopieces/classifylist', {})
  if (response.data.code === 1 && response.data.data) {
    page_menu_list.value = response.data.data
  }
}
</script>

<style scoped>
.son-page-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.son-page-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 20% 20%, rgba(161,140,209,0.35) 0%, rgba(161,140,209,0.0) 60%) ,
              radial-gradient(50% 50% at 80% 30%, rgba(251,194,235,0.35) 0%, rgba(251,194,235,0.0) 55%),
              radial-gradient(40% 40% at 50% 80%, rgba(120,214,255,0.25) 0%, rgba(120,214,255,0.0) 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: auroraMove 18s ease-in-out infinite alternate;
}

.son-page-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 1px,
    transparent 2px,
    transparent 4px
  );
  opacity: 0.35;
  pointer-events: none;
}

@keyframes auroraMove {
  0% { transform: translate3d(0,0,0) scale(1); filter: hue-rotate(0deg) saturate(110%); }
  100% { transform: translate3d(0,-2%,0) scale(1.02); filter: hue-rotate(25deg) saturate(120%); }
}

.main-container {
  height: 100vh;
  width: 100%;
  backdrop-filter: blur(5px);
}

.header-container {
  padding: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.el-main {
  padding: 20px;
  height: 90vh;
  overflow-x: hidden;
}

.el-row {
  height: 100%;
  margin: 0 !important;
}

.el-col {
  height: 100%;
}

.area-container {
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(161,140,209,0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255,255,255,0.06);
  transition: all 0.3s ease;
  padding: 15px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.area-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(120deg, rgba(161,140,209,0.5), rgba(251,194,235,0.4) 40%, rgba(120,214,255,0.4) 80%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.55;
}

.lab-main {
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 0;
  gap: 12px;
  width: 100%;
}
.lab-left,
.lab-middle,
.lab-right {
  height: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(161,140,209,0.25);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
}

.lab-left::after,
.lab-middle::after,
.lab-right::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(60% 40% at 0% 0%, rgba(161,140,209,0.18), transparent 60%) ,
              radial-gradient(50% 35% at 100% 0%, rgba(120,214,255,0.14), transparent 60%);
  pointer-events: none;
}

.lab-left {
  flex: 1 1 70%;
}

.left-second-row {
  display: flex;
  gap: 12px;
  padding: 12px;
}

.left-second-half {
  flex: 1 1 50%;
  /* 无边框、无背景色 */
  border: none;
  background: transparent;
}

/* 排行榜容器不超出父容器，并可滚动 */
.left-second-left,
.left-second-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.left-second-left .rank-list,
.left-second-right .rank-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rank-top1 {
  display: grid;
}

.rank-top23 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rank-rest {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rank-top-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0 10px;
  position: relative;
}

.avatar-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

/* 首字母样式 */
.initials {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 皇冠装饰 */
.rank-1 .avatar-wrapper::before,
.rank-2 .avatar-wrapper::before,
.rank-3 .avatar-wrapper::before {
  content: '';
  position: absolute;
  top: -18px;
  width: 36px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 40"><path d="M6 34h52l-6-18-12 9-8-18-8 18-12-9-6 18z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 40"><path d="M6 34h52l-6-18-12 9-8-18-8 18-12-9-6 18z"/></svg>') center/contain no-repeat;
}

.rank-1 .avatar-wrapper { color: #ffb300; }
.rank-2 .avatar-wrapper { color: #cfcfcf; }
.rank-3 .avatar-wrapper { color: #fb8c00; }

/* 光环与荣誉环 */
.rank-1 .avatar-wrapper::after,
.rank-2 .avatar-wrapper::after,
.rank-3 .avatar-wrapper::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,255,255,0.0), rgba(255,255,255,0.9), rgba(255,255,255,0.0) 35%);
  animation: rotateGlow 3s linear infinite;
  filter: blur(0.6px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.rank-1 .rank-top-avatar { box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 0 0 3px rgba(255, 215, 64, 0.45); }
.rank-2 .rank-top-avatar { box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 0 0 3px rgba(224, 224, 224, 0.45); }
.rank-3 .rank-top-avatar { box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 0 0 3px rgba(255, 171, 64, 0.45); }

@keyframes rotateGlow {
  to { transform: rotate(360deg); }
}

.rank-top-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 28px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,255,255,0.15);
  background-color: #f0f0f0; /* 加载过程中显示背景色 */
}

.rank-1 .rank-top-avatar { width: 96px; height: 96px; }
.rank-2 .rank-top-avatar { width: 88px; height: 88px; }
.rank-3 .rank-top-avatar { width: 88px; height: 88px; }

.rank-top-name {
  margin-top: 8px;
  font-size: 14px;
  color: var(--dynamic-label-color, #eaeaea);
  font-weight: 700;
}

.rank-badge {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #1e1e1e;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* 王冠样式 */
.crown {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.crown.gold {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFD700' d='M12 2L14.5 8H21L16.5 12L19 18L12 14.5L5 18L7.5 12L3 8H9.5L12 2Z'/%3E%3C/svg%3E");
}

.crown.silver {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C0C0C0' d='M12 2L14.5 8H21L16.5 12L19 18L12 14.5L5 18L7.5 12L3 8H9.5L12 2Z'/%3E%3C/svg%3E");
}

.crown.bronze {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23CD7F32' d='M12 2L14.5 8H21L16.5 12L19 18L12 14.5L5 18L7.5 12L3 8H9.5L12 2Z'/%3E%3C/svg%3E");
}

.rank-1 .rank-badge { background: linear-gradient(90deg, #ffd54f, #ffb300); }
.rank-2 .rank-badge { background: linear-gradient(90deg, #e0e0e0, #bdbdbd); }
.rank-3 .rank-badge { background: linear-gradient(90deg, #ffcc80, #fb8c00); }

.rank-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(161,140,209,0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.rank-item:hover {
  transform: translateY(-2px);
  border-color: rgba(161,140,209,0.5);
  box-shadow: 0 10px 24px rgba(161,140,209,0.28), 0 0 0 6px rgba(161,140,209,0.12);
}

.rank-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rank-index {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(161,140,209,0.25);
  color: var(--dynamic-label-color, #eaeaea);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.rank-1 .rank-index {
  background: linear-gradient(90deg, #ffd54f, #ffb300);
  color: #2b2100;
}
.rank-2 .rank-index {
  background: linear-gradient(90deg, #e0e0e0, #bdbdbd);
  color: #1e1e1e;
}
.rank-3 .rank-index {
  background: linear-gradient(90deg, #ffcc80, #fb8c00);
  color: #2b1400;
}

/* 取消前三名卡片边框与卡片式布局，改为头像居中展示 */

.rank-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: #fff;
}

.rank-name {
  color: var(--dynamic-label-color, #eaeaea);
  font-weight: 600;
  font-size: 14px;
}

.rank-score {
  color: rgba(255,255,255,0.6);
  font-size: 12px;
}

/* 竖直分割线 */
.divider-vertical {
  width: 1px;
  background: linear-gradient(180deg, rgba(161,140,209,0) 0%, rgba(161,140,209,0.5) 50%, rgba(161,140,209,0) 100%);
  align-self: stretch;
  margin: 0 6px;
}

.month-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
}

.month-item {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(161,140,209,0.25);
  color: var(--dynamic-label-color, #eaeaea);
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

.month-item.active {
  transform: scale(1.12);
  background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(161,140,209,0.25);
}

.month-item:hover:not(.active) {
  box-shadow: 0 6px 16px rgba(161,140,209,0.22);
  transform: translateY(-1px);
}

.lab-middle {
  flex: 1 1 20%;
  padding: 12px;
}

.lab-right {
  flex: 1 1 10%;
  padding: 12px;
}

.quick-entry {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}

.quick-item {
  display: flex;
  flex: 1 1 25%;
  align-items: center;
  justify-content: center;
}

.quick-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);
  color: #fff;
  font-weight: 600;
  border: 1px solid rgba(161,140,209,0.35);
  box-shadow: 0 6px 16px rgba(161,140,209,0.3), inset 0 0 0 1px rgba(255,255,255,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  position: relative;
  overflow: hidden;
}

.quick-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 24px rgba(161,140,209,0.45), 0 0 0 6px rgba(161,140,209,0.12);
  filter: saturate(110%);
}

.quick-btn::before {
  content: '';
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,255,255,0.0), rgba(255,255,255,0.6), rgba(255,255,255,0.0) 30%);
  animation: spinRing 3.2s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes spinRing { to { transform: rotate(360deg); } }

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dynamic-label-color, #eaeaea);
  margin-bottom: 10px;
}

.section-title::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 6px;
  background: linear-gradient(90deg, #a18cd1 0%, transparent 100%);
  border-radius: 2px;
  opacity: 0.9;
}

.section-title {
  text-shadow: 0 0 18px rgba(161,140,209,0.35);
}

.template-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.template-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(161,140,209,0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.template-item:hover {
  transform: translateY(-2px);
  border-color: rgba(161,140,209,0.45);
  box-shadow: 0 10px 24px rgba(161,140,209,0.28);
}

.template-list {
  perspective: 800px;
}

.template-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.template-item:hover .template-thumb {
  transform: scale(1.05);
  filter: brightness(1.08);
}

.category-name {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.template-name {
  font-size: 14px;
  color: var(--dynamic-label-color, #eaeaea);
  font-weight: 600;
}
</style>